//我在做这个文件，我的群昵称是King
<template>
	<view class="report">
		<view class="report-step">
			<uni-steps :options="stepOptions" :active="currentStep" @tap="select()"></uni-steps>
		</view>
		<view class="report-form-list">
			<view class="report-form">
				<scroll-view scroll-y="true" class="report-form-content">
					<view v-if="currentStep==0">
						<view class="uni-form-item uni-common-bb">
							<text class="uni-label">被举报人姓名：</text>
							<input class="uni-input" type="text" v-model="data.reportName" placeholder="请输入举报人姓名" />
						</view>
						<view class="uni-form-item uni-common-bb">
							<text class="uni-label">被举报人单位：</text>
							<input class="uni-input" type="text" v-model="data.reportCompany" placeholder="请输入被举报人单位" />
						</view>
						<view class="uni-form-item uni-common-bb">
							<text class="uni-label">被举报人职务：</text>
							<input class="uni-input" type="text" v-model="data.reportJob" placeholder="请输入被举报人职务" />
						</view>
						<view class="uni-form-item uni-common-bb">
							<text class="uni-label">举报内容分类：</text>
							<picker :range="reportTypeList" @change="changeType" :value="reportTypeIndex" class="uni-input">
								<view>{{reportTypeList[reportTypeIndex]}}</view>
							</picker>
							<text class="uni-icon uni-icon-arrowright" style="color: #D1D1D1;"></text>
						</view>
						<view class="uni-form-item uni-common-bb">
							<text class="uni-label">发生时间：</text>
							<view class="uni-flex" style="align-items: center;flex:1">
								<picker mode="date" :value="date" @change="bindDateChange">
									<view class="uni-input" style="padding-right: 10upx;">{{date}}</view>
								</picker>
								<picker mode="time" :value="time" @change="bindTimeChange">
									<view class="uni-input" style="padding-left: 0;">{{time}}</view>
								</picker>
							</view>
						</view>
						<view class="uni-form-item uni-common-bb">
							<text class="uni-label">发生地点：</text>
							<input class="uni-input" type="text" v-model="data.reportPlace" placeholder="请输入发生地点" />
							<text class="uni-icon uni-icon-location-filled" style="padding-right: 10upx;color: #D1D1D1;" @tap="location"></text>
						</view>
						<view class="uni-form-item uni-common-bb">
							<text style="padding:0 20upx;">举报内容：</text>
							<textarea v-model="data.reportContent" length="0" placeholder="请输入举报内容" style="flex: 1;" />
							</view>
						<view>
							<view class="uni-flex" style="padding: 20upx 10upx;align-items: center;">
								<text style="padding:0 20upx;">举报图片:</text>
								<view class="uni-flex img" style="flex:1;flex-wrap: wrap;justify-content: space-between;">
									<image :src="item" v-for="(item,index) in data.reportPicList" :key="index" style="margin-bottom: 20upx;width:180upx;height: 180upx;border-radius: 8upx;" mode="aspectFill">
									</image>
									<view v-if="data.reportPicList.length<9" class="uni-icon uni-icon-plusempty" @tap="chooseImage" style="margin-bottom: 20upx; width: 180upx;height: 180upx;font-size: 98upx;color: #d1d1d1;border: 2upx solid #d1d1d1;display: flex;align-items: center;justify-content: center;border-radius: 8upx;"></view>
								</view>
							</view>
						</view>
					</view>
					<view v-if="currentStep==1">
						<view style="padding: 20upx;text-indent: 48upx;color: #1AAD19;">
							填写你的联系方式，以便于对不明确的信息进行核实、对后续结果给予反馈，包括给予奖励。
						</view>
						<view class="uni-form-item uni-common-bb">
							<text class="uni-label">举报人姓名：</text>
							<input class="uni-input" type="text" v-model="data.postFullName" placeholder="请输入举报人姓名" />
						</view>
						<view class="uni-form-item uni-common-bb">
							<text class="uni-label">举报人电话：</text>
							<input class="uni-input" type="number" v-model="data.postMobilePhone" placeholder="请输入举报人电话" />
						</view>
						<view class="uni-form-item uni-common-bb">
							<text class="uni-label">举报人邮箱：</text>
							<input class="uni-input" type="email" v-model="data.postEmail" placeholder="请输入举报人邮箱" />
						</view>
					</view>
					<view v-if="currentStep==2" style="display: flex;align-content: center;justify-content: center;font-size: 48upx;padding-top: 100upx;color: #1AAD19;">
						感谢您的积极反馈
					</view>
				</scroll-view>
				<view class="report-form-btn">
					<view class="btn" @tap="next">{{currentTxt}}</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	var _this;
	import util from "../../common/util.js"
	var graceChecker = require("../../common/graceChecker.js");
	export default {
		data() {
			return {
				showPicker: true,
				type: 'datetime',
				currentStep: 0,
				currentTxt:'下一步',
				reportTypeIndex:0,
				date:util.dateUtils.dateFormat(new Date(),"yyyy-MM-dd"),
				time:util.dateUtils.dateFormat(new Date(),"hh:mm"),
				reportTypeList:[
					'哄抬物价',
					'公共场所不戴口罩'
				],
				stepOptions: [{
					title: '填写举报信息'
				}, {
					title: '填写个人信息'
				}, {
					title: '提交举报信息'
				}],
				data:{
					reportName:'',
					reportCompany:'',
					reportJob:'',
					reportType:'',
					reportTime:util.dateUtils.dateFormat(new Date(),"yyyy-MM-dd hh:mm"),
					reportPlace:'',
					reportContent:'',
					reportPicList:[],
					postFullName:'',
					postMobilePhone:'',
					postEmail:''

				}
			}
		},
		onLoad(){
			_this=this;
		},
		methods: {
			bindDateChange:function(e){
				this.date=e.detail.value;
				this.data.reportTime=this.date+" "+this.time;
			},
			bindTimeChange:function(e){
				this.time=e.detail.value;
				this.data.reportTime=this.date+" "+this.time;
			},
			location:function(){
				uni.chooseLocation({
					success:function(res){
						_this.data.reportPlace=res.address;
					}
				})
			},
			onShowDatePicker: function(type) {
				this.$refs.dateTime.show();
			},
			changeType:function(e){
				this.reportTypeIndex=e.detail.value;
				this.data.reportType=this.reportTypeList[e.detail.value];
			},
			chooseImage:function(e){
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['camera', 'album'],
					success:(res)=>{
						uni.showLoading({
							title:'正在上传图片'
						})
						this.$cloud.uploadFile({
						   filePath: res.tempFilePaths[0],
							success:function(result){
								_this.data.reportPicList.push(result.fileID);
							},fail:function(){
								uni.showToast({title:'上传图片失败'})
							},complete:function(){
								uni.hideLoading();
							}
						});
					}
				})
			},
			select:function(e){

			},
			next:function(){
				if(this.currentStep<2){
					if(this.currentStep==0){
						var rule = [{
						name: "reportName",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "请输入举报人姓名"
						},{
						name: "reportCompany",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "请输入被举报人单位"
						},{
						name: "reportJob",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "请输入被举报人职务"
						},{
						name: "reportPlace",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "请输入发生地点"
						},{
						name: "reportContent",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "请输入举报内容"
						}];
						var formData = this.data;
						var checkRes = graceChecker.check(formData, rule);
						if(checkRes==false)
						{
						      uni.showToast({
						         icon: 'none',
						         title: graceChecker.error
						      });
						      return false;
						}
						if(this.data.reportPicList.length==0)
						{
							uni.showToast({
							   icon: 'none',
							   title: '请上传举报图片'
							});
							return false;
						}
						this.currentStep=this.currentStep+1;
						this.currentTxt='提交';
						return true;
					}
					if(this.currentStep==1)
					{
						var rule = [{
						name: "postFullName",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "请输入举报人姓名"
						},{
						name: "postMobilePhone",
						checkType: "phoneno",
						checkRule: "",
						errorMsg: "请输入有效的手机号码"
						},{
						name: "postEmail",
						checkType: "email",
						checkRule: "",
						errorMsg: "请输入有效的邮箱"
						},
						];
						var formData = this.data;
						var checkRes = graceChecker.check(formData, rule);
						if(checkRes==false)
						{
						      uni.showToast({
						         icon: 'none',
						         title: graceChecker.error
						      });
						      return false;
						}
						uni.showLoading();
						this.$cloud.callFunction({
						  name: 'report',
						  data: _this.data
						}).then((res) => {
						  uni.hideLoading()

						  this.currentStep=this.currentStep+1;
						}).catch((err) => {
						  uni.hideLoading()
						  uni.showModal({
						    content: '举报失败',
						    showCancel: false
						  })
						})
					}
				}
				else{
					this.currentTxt="完成";
				}
			}
		}
	}
</script>

<style>
	@import url("../../common/uni.css");
	page,
	.report {
		height: 100%;
	}
	.img::after{content: '';display: block;width: 180upx;height: 0;}
	.report {
		display: flex;
		flex-direction: column;
	}

	.report-step {
		padding: 10px 0px;
	}

	.report-form-list {
		position: relative;
		display: flex;
		flex: 1;
	}

	.report-form {
		display: flex;
		width: 100%;
		height: 100%;
		flex-direction: column;
	}

	.report-form-content {
		display: flex;
		flex: 1;
	}

	.report-form-btn {
		display: flex;
		flex-direction: row;
		height: 40px;
	}

	.report-form-btn .btn {
		flex: 1;
		text-align: center;
		line-height: 40px;
		font-size: 16px;
		color: white;
		font-size: ;
		background-color: #4CD964;
	}

	.report-form-btn .btn:first-child {
		background-color: #DD524D;
	}

	.report-form-btn .btn:last-child {
		background-color: #007AFF;
	}
	.uni-common-bb{display: flex;border-bottom: 2upx solid #d1d1d1;align-items: center;}
	.uni-common-bb .uni-label{width: 240upx;text-align: right;}
	.uni-common-bb .uni-input{flex:1;}
</style>
